移动端与 Core Web Vitals
Google 自 2021 年起将 Core Web Vitals（CWV）纳入排名因素，并已全面切换为 Mobile-first 索引。忽视移动端体验，就是在主动放弃排名机会。
Mobile-first 索引的含义
Google 爬虫优先抓取和评估网站的移动端版本。即使你的主要用户在桌面端，Google 也会用手机版内容来决定你的排名。
graph LR
GOOGLE[Googlebot 手机版] --> MOBILE[抓取移动端页面]
MOBILE --> INDEX[基于移动端内容建立索引]
INDEX --> RANK[影响桌面端和移动端排名]
DESKTOP[桌面端内容] -.->|若与移动端不一致| WARN[排名受损]
style MOBILE fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
style WARN fill:#ffebee,stroke:#c62828,stroke-width:2px
Core Web Vitals 三项指标详解
| 指标 | 全称 | 衡量内容 | 良好阈值 | 需优化阈值 |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | 最大内容元素渲染时间 | ≤ 2.5s | > 4.0s |
| CLS | Cumulative Layout Shift | 视觉稳定性（页面抖动） | ≤ 0.1 | > 0.25 |
| INP | Interaction to Next Paint | 交互响应速度（替代FID） | ≤ 200ms | > 500ms |
LCP 优化实战
LCP 通常是首屏最大的图片或文字块，优化重点：
graph TD
LCP[LCP 优化] --> IMG[图片优化]
LCP --> SERVER[服务器响应]
LCP --> CSS[渲染阻塞资源]
IMG --> IMG1[使用 WebP/AVIF 格式]
IMG --> IMG2[添加 fetchpriority=high 属性]
IMG --> IMG3[不对 LCP 图片使用懒加载]
SERVER --> S1[使用 CDN 加速]
SERVER --> S2[开启 HTTP/2]
SERVER --> S3[TTFB 控制在 800ms 内]
CSS --> C1[内联关键 CSS]
CSS --> C2[延迟加载非关键 JS]
style LCP fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
style IMG fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
CLS 优化实战
CLS 问题通常由以下元素导致：
- 未指定尺寸的图片和视频（始终设置
width和height属性） - 动态注入的广告横幅（为广告位预留固定空间）
- 自定义字体导致的文字跳动（使用
font-display: optional或swap） - 延迟加载的内容在页面顶部插入（避免在视口内动态插入内容）
INP 优化实战
INP 衡量用户与页面交互（点击、输入）后的响应速度：
- 避免长任务（Long Tasks > 50ms）阻塞主线程
- 使用
requestIdleCallback延迟非关键计算 - 减少第三方脚本（分析、聊天插件、广告）
- 使用 Web Workers 将复杂计算移出主线程
测量工具对比
| 工具 | 数据类型 | 使用场景 |
|---|---|---|
| PageSpeed Insights | 实验室 + 真实用户数据 | 单页面诊断 |
| Google Search Console | 真实用户数据（28天） | 批量发现问题页面 |
| Chrome DevTools | 实验室数据 | 开发阶段调试 |
| WebPageTest | 实验室数据 | 深度瀑布图分析 |
| Lighthouse | 实验室数据 | CI/CD 集成自动检测 |
实战行动清单
- [ ] 在 Google Search Console → 体验 → Core Web Vitals 查看问题页面列表
- [ ] 用 PageSpeed Insights 分别测试移动端和桌面端评分
- [ ] 确认所有图片都有明确的
width和height属性 - [ ] 检查首屏最大图片是否设置了
fetchpriority="high"且未使用懒加载 - [ ] 使用 Google Search Console 移动可用性报告，修复所有移动端错误
- [ ] 在真实手机设备上手动浏览关键落地页，检查布局抖动
下一节: 技术SEO审计清单